<template>
  <div>
    <div><span class="back" @click="router.back()">back</span>角色表单</div>
    <el-form :model="form" label-width="auto">
      <el-form-item label="角色名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="form.description" />
      </el-form-item>
      <el-form-item class="form_footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="primary" @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const router = useRouter(); // 路由实例
const route = useRoute(); // 当前路由信息

const props = defineProps({
  uuid: {
    type: String,
    default: "",
  },
  form: {
    type: Object,
    default: () => ({
      name: "",
      description: "",
    }),
  },
});

/**
 * 提交表单
 */
const onSubmit = () => {
  if (route.params.uuid) {
    // 编辑角色
  } else {
    // 添加角色
  }

  // 提交后返回角色列表 替换当前历史记录
  router.replace("/role").then(() => {
    console.log(history.length, "end");
  });
  // location.replace("/role"); // 提交后返回角色列表 并刷新页面
  // location.assign("/role"); // 提交后返回角色列表 并刷新页面
};
</script>

<style scoped>
.back {
  cursor: pointer;
}
</style>
